import "./App.css";
import { RouterProvider } from "react-router-dom";
import { getRouter, onRouterChange } from "@/router/index";
import { ConfigProvider, message, theme } from "antd";
import { useEffect, useState } from "react";
import { setMessageApi } from "@/utils/messageHolder";
import { useSelector } from "react-redux";
import type { RootState } from "./store";

function App() {
  const [messageApi, contextHolder] = message.useMessage();
  const [router, setRouter] = useState(getRouter()); // 这里保存 router
  const componentSize: "small" | "middle" | "large" = "small";

  useEffect(() => {
    setMessageApi(messageApi);
  }, [messageApi]);

  useEffect(() => {
    // 注册监听，当 addRoute 重建 router 时，自动更新 App 内部的 router
    onRouterChange((newRouter) => {
      setRouter(newRouter);
    });
  }, []);

  const dark = useSelector((state: RootState) => state.config.darkTheme);
  return (
    <ConfigProvider
      componentSize={componentSize}
      theme={{
        algorithm: dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        // token: { colorPrimary: "#00b96b" },
        components: {
          Layout: {
            siderBg: dark ? "#141414" : "#ffffff",
            headerBg: dark ? "#141414" : "#ffffff",
          },
        },
      }}>
      {contextHolder}
      <RouterProvider router={router} />
    </ConfigProvider>
  );
}

export default App;
